<!--
 多级表头td配置
 @Author: mosowe
 @Date:2023-04-13 09:32:50
-->
<template>
  <view
    class="mosowe-td"
    :style="{
      '--border-right': border ? '1px solid #EBEEF5' : 'none',
      width: componentWidth()
    }"
  >
    <template v-for="item in column.children">
      <mosowe-td
        v-if="item.children && item.children.length"
        :column="item"
        :width="100 / column.children.length + '%'"
        :itemData="itemData"
        :border="border"
      ></mosowe-td>
      <view
        v-else
        class="next-td"
        :style="{
          width: childWidth(item),
          textAlign: item.align || 'inherit'
        }"
      >
        <text class="text">{{ tableTdContent(item, itemData[item.value]) }}</text>
      </view>
    </template>
  </view>
</template>

<script>
export default {
  name: 'mosowe-td',
  props: {
    column: {
      type: Object,
      default: () => ({})
    },
    border: {
      type: Boolean,
      default: false
    },
    itemData: {
      type: Object,
      default: () => ({})
    },
    width: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {};
  },
  methods: {
    // 表格区-td内容过滤展示
    tableTdContent(column, value) {
      if (column?.enum && Array.isArray(column?.enum)) {
        const data = column?.enum.filter(item => item.value === value);
        return data.length ? data[0].text : value;
      }
      return value;
    },
    componentWidth() {
      if (this.column?.width) {
        return this.column?.width?.endsWith('px') ? this.column.width : this.column.width + 'px';
      }
      return this.width;
    },
    childWidth(item) {
      if (item?.width) {
        return item?.width?.endsWith('px') ? item.width : item.width + 'px';
      }
      return 100 / this.column?.children.length + '%';
    }
  }
};
</script>

<style scoped lang="scss">
.mosowe-td {
  display: flex;
  min-height: 50px;
  .next-td {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 8px 10px;
    box-sizing: border-box;
    border-right: var(--border-right);
    .text {
      flex: 1;
    }
  }
}
</style>
